<template>
	<view class="productSearch">
		<view class="productSearchtop">
			<image src="https://www.kmdj2018.com/Uploads/zfb/search.png" mode="aspectFit"></image>
			<input type="text" v-model="name" placeholder="请输入关键词进行搜索" placeholder-style="font-size: 28rpx;color: #969799;">
			<text @click="getadd(name)">搜索</text>
		</view>
		<view v-if="shop.length == 0">
			<view class="productSearchCen" v-if="iSsea">
				<view class="productSearchCenTop">
					<text>历史搜索</text>
					<image src="https://www.kmdj2018.com/Uploads/zfb/del.png" mode="aspectFit"
						@click="$refs.popthree.show()"></image>
				</view>
				<view class="productSearchCenLishi">
					<text v-for="(item,key) in list" :key='key' @click="getadd(item.name)">{{item.name}}</text>
				</view>
			</view>
			<view class="productSearchNull" v-if="!iSsea">
				<image src="https://www.kmdj2018.com/Uploads/zfb/null.png" mode="aspectFit"></image>
				<view>抱歉，暂时没有您搜索的商品</view>
			</view>
		</view>
		<view v-else class="tab-Two">
			<shop :list="shop"></shop>
		</view>
		<pop ref="popthree" direction="center" :is_close="false" :is_mask="true" :width="660" height="fit-content"
			:maskFun="true">
			<iSpop text="是否确定删除历史？" left="确定" right="再想想" @clickleft="getcancel" @clickright="$refs.popthree.close()">
			</iSpop>
		</pop>
	</view>
</template>

<script>
	import pop from "@/components/ming-pop/ming-pop.vue";
	import shop from "@/components/shop/shop.vue"
	export default {
		data() {
			return {
				iSsea: true,
				name: '',
				shop: [], //商品列表
				list: [], //搜索历史
			};
		},
		components: {
			pop,shop
		},
		watch: {
			name(val) {
				if (val.length == 0) {
					this.iSsea = true
					this.shop = []
					this.init()
				}
				return val
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			getcancel() {
				this.$request("Index/DeleteSeach", {
					data: {

					},
					isLoad: true
				}).then(res => {
					this.$refs.popthree.close()
					this.init()
				})
			},
			getadd(name) {
				// 搜索商品如果为空  隐藏历史记录
				this.name = name
				if(this.name == ''){
					this.shop = []
					// this.iSsea = false
					return
				}
				this.$request("Index/SeachGoods", {
					data: {
						name: name
					},
					isLoad: true
				}).then(res => {
					if (res.result.length != 0) {
						this.shop = res.result
					} else {
						this.shop = []
						this.iSsea = false
					}
				})
			},
			init() {
				this.$request("Index/SeachList", {
					data: {

					},
					isLoad: true
				}).then(res => {
					this.list = res.result
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.productSearch {
		// background-color: #fff;
		min-height: 100vh;
	}

	.productSearchtop {
		padding: 20rpx 32rpx;
		position: relative;

		input {
			// width: 100%;
			width: 614rpx;
			height: 64rpx;
			background-color: #F5F6FA;
			border-radius: 50rpx;
			padding-left: 72rpx;
		}

		>text {
			width: 160rpx;
			height: 66rpx;
			background-color: #F7BC1C;
			text-align: center;
			line-height: 66rpx;
			color: #333333;
			font-size: 28rpx;
			position: absolute;
			right: 24rpx;
			top: 22rpx;
			border-radius: 100rpx;
		}

		image {
			width: 28rpx;
			height: 28rpx;
			position: absolute;
			top: 42rpx;
			left: 62rpx;
		}
	}

	.productSearchCen {
		padding: 20rpx 36rpx;

		.productSearchCenTop {
			display: flex;
			justify-content: space-between;

			>text {
				font-size: 32rpx;
				font-weight: bold;
			}

			>image {
				width: 44rpx;
				height: 44rpx;
			}
		}

		.productSearchCenLishi {
			margin-top: 12rpx;

			>text {
				background-color: #F0F1F5;
				font-size: 28rpx;
				padding: 14rpx 32rpx;
				margin: 20rpx 15rpx 20rpx 0;
				display: inline-block;
				border-radius: 100rpx;
			}
		}
	}

	.productSearchNull {
		text-align: center;
		padding-top: 162rpx;

		image {
			width: 280rpx;
			height: 180rpx;
		}

		view {
			font-size: 28rpx;
			color: #333333;
			margin-top: 40rpx;
		}
	}
	.tab-Two{
		padding: 20rpx 32rpx;
	}
</style>
